import { t } from 'i18next'
import React, { FC } from 'react'
import { Avatar } from '@/components/Avatar'
import { UserModel } from '../interface'
import {
	IconCheckbox,
	IconOftenInAvatar,
	IconRemove,
	IconToggleAdd,
	IconToggleCancel,
	IconTreeDownArrow,
	IconTreeRightArrow,
	ItemWrap,
} from '../style'
import { useMeetingParamsStore } from '../../meetingParams/store'
import { useBasicInfoStore } from '../../basicInfo/store'
import { useUserAllStore } from './store'
import { addItemInSimple, removeItemInAll, removeItemInSimple } from '../store.combine'
import shallow from 'zustand/shallow'
import { useGlobalStore } from '@/store/global'

export const ListItem: FC<Omit<UserModel, 'children'>> = (props) => {
	const { mcc, status, attr, nestingLevel, uuid } = props

	const { itemHandle, toggleTree } = useUserAllStore(
		(state) => ({
			itemHandle: state.itemHandle,
			toggleTree: state.toggleTree,
		}),
		shallow
	)

	const curIsCascade = useMeetingParamsStore((state) => state.simpleCascade === 1)
	const type = useBasicInfoStore((state) => (state.superMtNum ? 'isInteractive' : 'isOften'))
	const SWITCH = useGlobalStore((state) => state.SWITCH)
	/** 是否显示五角星 */
	const canShowIcon = type === 'isOften' ? (!!SWITCH.showOftenMt ? true : false) : true

	const handleCheckItem = (e: React.MouseEvent) => {
		if (e.ctrlKey) {
			itemHandle(attr.actualUuid, 'ctrl')
		} else if (e.shiftKey) {
			itemHandle(attr.actualUuid, 'shift')
		} else {
			itemHandle(attr.actualUuid, 'click')
		}
	}
	const handleMultiCheck = (e: React.MouseEvent) => {
		e.stopPropagation()
		itemHandle(attr.actualUuid, 'ctrl')
	}
	const handleRemove = (e: React.MouseEvent) => {
		e.stopPropagation()
		removeItemInAll(attr.actualUuid)
	}
	const handleToggleTree = (e: React.MouseEvent) => {
		e.stopPropagation()
		toggleTree(status)
	}

	const handleToggleClick = (e: React.MouseEvent) => {
		e.stopPropagation()
		if (type === 'isOften') {
			if (status.isOften) {
				removeItemInSimple(uuid)
			} else {
				addItemInSimple(uuid)
			}
		} else {
			if (status.isInteractive) {
				removeItemInSimple(uuid)
			} else {
				addItemInSimple(uuid)
			}
		}
	}

	return (
		<ItemWrap checked={status.checked} onClick={handleCheckItem} nestingLevel={nestingLevel}>
			{curIsCascade && mcc.account_type === 10 && !attr.isSimpleCascade ? (
				<div className="left-wrap">
					{status.isOpen ? (
						<IconTreeDownArrow onClick={handleToggleTree} />
					) : (
						<IconTreeRightArrow onClick={handleToggleTree} />
					)}
				</div>
			) : (
				<div className="left-wrap" onClick={handleMultiCheck}>
					<IconCheckbox className="icon-checkbox" />
				</div>
			)}
			<div className="avatar" title={mcc.name}>
				<Avatar value={mcc} />
				{status[type] && <IconOftenInAvatar className="avatar--often" />}
			</div>
			<div className="name" title={mcc.name}>
				{mcc.name}
			</div>
			<div className="right-icons">
				{canShowIcon ? (
					!curIsCascade || mcc.account_type !== 10 || attr.isSimpleCascade ? (
						status[type] ? (
							<IconToggleCancel
								className="set-often"
								title={type === 'isOften' ? t('取消常用终端') : t('取消互动终端')}
								onClick={handleToggleClick}
							/>
						) : (
							<IconToggleAdd
								className="set-often"
								title={type === 'isOften' ? t('设置常用终端') : t('设置互动终端')}
								onClick={handleToggleClick}
							/>
						)
					) : (
						curIsCascade &&
						status[type] && (
							<IconToggleCancel
								className="set-often"
								title={type === 'isOften' ? t('取消常用终端') : t('取消互动终端')}
								onClick={handleToggleClick}
							/>
						)
					)
				) : (
					<></>
				)}
				{nestingLevel === 0 && <IconRemove className="remove" onClick={handleRemove} />}
			</div>
		</ItemWrap>
	)
}
